<template>
    <template v-for="item in props.tableHeader" :key="item.value">
        <el-table-column v-if="!item.sort" :prop="item.value" :label="item.label" />
        <el-table-column v-else :prop="item.value" :label="item.label">
            <template #header="{ column }">
            <div class="sort-cell">
                <span>{{ item.label }}</span>
                <el-icon @click="handleSort(column)" :class="`el-icon--right setting${props.sortFlag === item.value ? ' is-sort' : ''}`">
                <CaretBottom />
                </el-icon>
            </div>
            </template>
        </el-table-column>
    </template>
</template>
<script setup lang="ts">
import { CaretBottom } from '@element-plus/icons-vue'
import type { ElTableColumn } from 'element-plus'
import type { PropType } from 'vue'
import type { TableHeader } from '@/components/custom-table/types'

const props = defineProps({
  tableHeader: {
    type: Array as PropType<TableHeader>,
    default: () => []
  },
  sortFlag: {
    type: String,
    require: true
  }
})

// 点击排序
interface Emits {
  (e: 'handleSort', val: string): void;
}
const emits = defineEmits<Emits>()
const handleSort = (column: typeof ElTableColumn) => {
  if (props.sortFlag !== column.property) {
    emits('handleSort', column.property)
  }
}

</script>
<style lang="scss" scoped>
.setting {
  color: #dae8fd;
  cursor: pointer;
}

.is-sort {
  color: black;
}

.sort-cell {
  display: flex;
  align-items: center;
}
</style>
